<template>
	<div>
		<div class="goods" v-for="(item,index) in cartarr" :key="index">
			{{item.title}}
			<img :src="item.img"/>
			<div class="goodsright">
				<i class="cubeic-remove" @click="removeCart(index)"></i>
				<span>{{item.cartCount}}</span>
				<i class="cubeic-add" @click="addCart(index)"></i>
			</div>
		</div>
		<cube-button style="margin:10px 5px 10px 5px;">下单</cube-button>
		<cube-button style="margin:10px 5px 10px 5px;" @click='clearcart()'>清空购物车</cube-button>
	</div>

</template>

<script>
import {mapState} from 'vuex'
export default{
	data(){
		return{
			
		}
	},
	computed:{
		...mapState({
			cartarr:state=>state.cartarry
		})
	},
	methods:{
		removeCart(index){
			this.$store.commit('cartremove',index)
		},
		addCart(index){
			this.$store.commit('cartadd',index)
		},
		clearcart(){
		    this.$store.commit('clearcart')
		}
	},
	
}
</script>

<style>
	.goods{
		padding: 10px;
		text-align: left;
		font-size: 23px;
	}
	.goodsright{
		float: right;
	}
	.goods .goodsright i{
		font-size: 23px;
	}
	.goods .goodsright span{
		font-size: 23px;
	}
	img{
		width: 30px;
		height: 30px;
		
	}
</style>
